<template>
	<nav-header :title="type == 'officeApply'? '会议室详情':'详情'">
		<u-swiper :list="placeObj.imageList" height="210" @change="e => currentNum = e.current" indicatorStyle="left: 10px"
			 radius="0" bgColor="#ffffff" @click="swiperClick">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ placeObj.imageList.length }}</text>
			</view>
		</u-swiper>
    <view class="flex justify-between items-center py-3 border-b-ee">
      <view class="flex items-center flex-1 mr-4">
        <view class="bg-white mx-1 px-2 py-3 text-black-33 font-bold border-b-ee tracking-wide text-lg" v-text="placeObj.name"></view>
      </view>
      <view v-if="type == 'officeApply'" class="rounded-full px-3 py-1 text-white text-sm blueGradient"
            @click="$util.myNavigateTo('/pages_mine/edit_user?businessType='+type+'&businessId='+placeObj.id+'&businessName='+placeObj.name)">使用申请</view>
    </view>
		<view class="p-4 border-b-ee mb-4">
      <view class="flex items-center mb-4">
          <i class="iconfont icon-duoren text-color-theme text-lg"></i>
          <text class="text-gray-66 pl-2" v-text="'可容纳人数：'+placeObj.accommodate || '暂无'"></text>
      </view>
			<view class="flex items-center mb-4">
				<i class="iconfont icon-shijian text-color-theme text-lg"></i>
				<view class="flex flex-wrap pl-2">
					<text class="text-gray-66 pr-2" v-text="placeObj.weeks && placeObj.weeks.split(',').length == 7? '周一至周日':(placeObj.weeks || '暂无')"></text>
					<text class="text-gray-66" v-text="'开放时间：'+placeObj.startHours + '-' + placeObj.endHours"></text>
				</view>
			</view>
			<view class="flex items-center justify-between mb-4">
				<view class="flex items-center">
					<i class="iconfont icon-dianhua text-color-theme text-lg"></i>
					<text class="text-gray-66 pl-2" v-text="'联系电话：'+ (placeObj.phone != null ? placeObj.phone : '暂无')"></text>
				</view>
				<view v-if="placeObj.phone != null " class="rounded-full px-3 py-1 text-white text-sm greenGradient" @click="phoneCall()">
					详情咨询
				</view>
			</view>
      <view class="flex items-center mb-4">
        <i class="iconfont icon-jingyan text-color-theme text-lg"></i>
        <text class="text-gray-66 pl-2" v-text="'配套：'+placeObj.introduce || '暂无'"></text>
      </view>
      <view class="flex items-center mb-4">
        <i class="iconfont icon-fenxiang1 text-color-theme text-lg"></i>
        <text class="text-gray-66 pl-2" v-text="'收费：'+placeObj.toll || '暂无'"></text>
      </view>
			<view class="flex items-center mb-4">
				<i class="iconfont icon-zuobiaofill text-color-theme text-lg"></i>
				<text class="text-gray-66 pl-2" v-text="'位置：'+placeObj.address || '暂无'"></text>
			</view>
			<view class="flex">
				<i class="iconfont icon-comment text-color-theme text-lg pt-0_5 pr-2"></i>
				<u-parse :content="placeObj.content" class="text-gray-66"></u-parse>
			</view>
		</view>

	</nav-header>
</template>

<script>
  import {mapState} from 'vuex'
	import NavHeader from '@/components/nav_header.vue'
	import * as siteApi from '@/interface/junchuang/site.js'
	import * as storeApi from '@/interface/junchuang/store.js'
	export default {
		components: {
			NavHeader
		},
		data() {
			return {
				id: '',
				type: '',
				platform: '',
        formCode: '',
				placeObj: this.initObj({}),
				currentNum: 0,
				markers: [],
				markerStyle: {
					color: '#d9982b',
					iconPath: '/pages_home/static/marker.png'
				}
			}
		},
    computed: {
      ...mapState({
        user: state => state.user,
      })
    },
		onLoad(e) {
			const v = this
			v.id = e.id
			v.type = e.type
			wx.getSystemInfo({
				success: function(res) {
					v.platform = res.platform
				}
			})
		},
		onReady() {
			const v = this
			if (v.type == 'yongjun') {
				v.markerStyle.color = '#2d58cb'
				v.markerStyle.iconPath = '/pages_home/static/marker_red.png'
			}
			v.initData()
		},
    mounted() {
      this.initData()
      if (this.user.token) {
        this.formCode = this.$util.getFormCode('会议室申请')
      }
    },
		methods: {
			initData () {
				const v = this
				v.$util.showLoading('数据加载中..')
				let httpRes = v.type == 'officeApply'? siteApi.getSiteDetail(v.id):storeApi.getStoreDetail(v.id)
				httpRes.then(res=>{
					if (res.success) {
						Object.assign(v.placeObj, res.data)
						if (v.placeObj.fileList.length > 0) {
							v.placeObj.fileList.forEach(file=>{
								v.placeObj.imageList.push(v.$util.formatImageIdUrl(file.id))
							})
						}else {
							v.placeObj.imageList.push(v.$config.server_pic_url + 'site_bg.jpg')
						}
						if (v.placeObj.lon && v.placeObj.lat) {
							v.markers.push({
								id: 0,
								logicId: v.placeObj.id,
								iconPath: v.markerStyle.iconPath,
								label: {
									anchorY: v.platform == 'android'? 0:-68,
									padding: v.platform == 'android'? 0:8,
									color: v.markerStyle.color,
									textAlign: 'center',
									content: v.placeObj.name,
									bgColor: '#fff',
									borderRadius: 6,
								}, latitude: v.placeObj.lat,longitude: v.placeObj.lon, width: 32, height: 32})
						}
					}
					v.$util.hideLoading()
				}).catch(e=>{
					v.$util.hideLoading()
				})
			},
			swiperClick (index) {
				this.$util.picPreview(index, this.placeObj.imageList)
			},
			goNav () {
				if (!this.placeObj.lat) return
				wx.openLocation({
					latitude: parseFloat(this.placeObj.lat),
					longitude: parseFloat(this.placeObj.lon)
				})
			},
			phoneCall () {
				const v = this
				if (!v.placeObj.phone) return
				if (v.platform == 'ios') {
					call()
				}else {
					wx.showActionSheet({
						itemList: [v.placeObj.phone,'呼叫'],
						success:function(res){
							if(res.tapIndex==1){
								call()
							}
						}
					})
				}
				function call() {
					wx.makePhoneCall({
						phoneNumber: v.placeObj.phone
					})
				}
			},
			initObj ({name,phone,imageList = [],fileList = [], startHours = '', endHours = '',weeks = '',address,lon,lat,introduce,content,toll,accommodate}) {
				return {name,phone,imageList,fileList,startHours, endHours,weeks,address,lon,lat,introduce,content,toll,accommodate}
			}
		}
	}
</script>

<style lang="scss">
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			 color: #FFFFFF;
			 font-size: 12px;
		 }
	}

	.greenGradient {
		background: #69ca7b;
		background: -webkit-linear-gradient(to bottom,#69ca7b,#5aad6b);
		background: linear-gradient(to bottom,#69ca7b,#5aad6b);
	}

	.blueGradient {
		background: #1fb3e7;
		background: -webkit-linear-gradient(to bottom,#1fb3e7,#3983ff);
		background: linear-gradient(to bottom,#1fb3e7,#3983ff);
	}
</style>
